<template>
  <div v-loading="loading" class="account-box">
    <el-form ref="form" :model="form" label-width="150px">
      <el-form-item label="审核方式">
        <el-radio-group v-model="form['refundVerifyStatus']">
          <el-radio label="0">自动审核</el-radio>
          <el-radio label="1">手动审核</el-radio>
        </el-radio-group>
        <el-alert
          :closable="false"
          title="注：自动审核状态下用户取消订单会根据“取消订单规则”自动扣除手续费，手动审核需在订单列表里手动处理。"
          type="info"/>
      </el-form-item>
      <el-form-item label="取消订单规则">
        <el-table :data="form.orderCancelRule" size="mini">
          <el-table-column min-width="180">
            <template slot="header" slot-scope="scope">
              <el-button size="mini" type="primary" @click="addCancelOrderRuleDialogVisible=true;">新增规则</el-button>
            </template>
            <template slot-scope="{row}">
              <span>发车前</span>
              <el-input v-if="row.edit" v-model="row.time" class="edit-input" size="mini" style="width: 54px;"/>
              <el-tag v-else type="warning" size="mini" disable-transitions>{{ row.time }}</el-tag>
              <span>小时以内，按订单金额</span>
              <el-input v-if="row.edit" v-model="row.percentage" class="edit-input" size="mini" style="width: 54px;"/>
              <el-tag v-else type="warning" size="mini" disable-transitions>{{ row.percentage }}%</el-tag>
              <span>收取服务费；</span>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template slot-scope="{$index, row}">
              <slot v-if="row.edit">
                <el-button type="success" size="mini" icon="el-icon-check" circle @click="confirmEditCancelOrderRule(row)"/>
                <el-button type="danger" size="mini" icon="el-icon-close" circle @click="cancelEditCancelOrderRule(row)"/>
              </slot>
              <slot v-else>
                <el-button size="mini" type="primary" @click="row.edit=!row.edit">编辑</el-button>
                <el-button size="mini" type="danger" @click="deleteCancelOrderRule($index, row)">删除</el-button>
              </slot>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="退改规则说明">
        <ws-editor v-model="form['ruleContent']"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('settingForm')">保存</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
    <!--取消订单规则弹窗-->
    <el-dialog :visible.sync="addCancelOrderRuleDialogVisible" title="新增规则" center width="500px">
      <span>发车前</span>
      <el-input v-model="cancelOrderRuleDialogForm.time" class="edit-input" style="width: 70px;"/>
      <span>小时以内，按订单金额</span>
      <el-input v-model="cancelOrderRuleDialogForm.percentage" class="edit-input" style="width: 70px;"/>
      <span>收取服务费；</span>
      <div slot="footer">
        <el-button @click="cancelAddCancelOrderRule">取 消</el-button>
        <el-button type="primary" @click="addCancelOrderRule">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {},
    data() {
      return {
        loading: false,
        form: {
          // 退款审核状态
          refundVerifyStatus: '0',
          // 内容
          ruleContent: '',
          // 规则列表
          orderCancelRule: []
        },
        // 取消订单规则相关
        addCancelOrderRuleDialogVisible: false,
        cancelOrderRuleDialogForm: {}
      }
    },
    mounted() {
      this.loadData();
    },
    methods: {
      // 加载信息
      loadData(){
        (async () => {
          this.loading = true;
          const result = await this.$service.applicationGetCancelRule();
          this.loading = false;
          if (result.code === 0) {
            Object.assign(this.form, result.data || {})
            this.form.orderCancelRule = this.form.orderCancelRule.map(v => {
              this.$set(v, 'edit', false);
              v.originalName = v.name;
              return v;
            })
          }
        })();
      },
      // 增加一条取消规则
      addCancelOrderRule() {
        this.form.orderCancelRule.push(this.cancelOrderRuleDialogForm);
        this.cancelOrderRuleDialogForm = {};
        this.addCancelOrderRuleDialogVisible = false;
      },
      // 取消增加一条取消规则
      cancelAddCancelOrderRule() {
        this.addCancelOrderRuleDialogVisible = false;
      },
      // 确定修改取消规则
      confirmEditCancelOrderRule(row) {
        row.edit = false;
        row.originalTitle = row.title;
      },
      // 取消修改取消规则
      cancelEditCancelOrderRule(row) {
        row.edit = false;
        row.name = row.originalName;
      },
      // 删除一条取消规则
      deleteCancelOrderRule(index) {
        this.form.orderCancelRule.splice(index, 1)
      },
      // 提交
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            (async () => {
              const params = Object.assign({}, this.form);
              params.orderCancelRule = JSON.stringify(this.form.orderCancelRule);
              const result = await this.$service.applicationModifyCancelRule(params);
              if (result.code === 0) {
                this.$message.success('操作成功~');
                this.loadData();
              } else {
                this.$message.error(result.msg);
              }
            })();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .el-alert {
    line-height: 30px;
  }
</style>
